<template>
  <!-- 今日场馆 -->
  <ModuleTitle title="今日场馆">
    <div class="w-full h-full box-border flex justify-between">
      <div class="w-48% flex flex-col justify-between">
        <div class="mt-20px">
          <h4 class="text-[#739DC2] text-16px">今日入馆人次</h4>
          <p class="text-[#66BBF9] flex items-end">
            <NumberAnimation :endValue="visitorNum" :duration="duration" class="font-bold text-40px" />
            <span class="mb-10px ml-4px">次</span>
          </p>
        </div>
        <div class="h-40%">
          <div ref="visitorChart" class="flex-1 w-full h-full"></div>
        </div>
      </div>
      <div class="w-48% flex flex-col justify-between">
        <div class="mt-20px">
          <h4 class="text-[#739DC2] text-16px">今日线上购票订单</h4>
          <p class="text-[#66BBF9] flex items-end">
            <NumberAnimation :endValue="orderNum" :duration="duration" class="font-bold text-40px" />
            <span class="mb-10px ml-4px">笔</span>
          </p>
        </div>
        <div class="h-40%">
          <div ref="orderChart" class="flex-1 w-full h-full"></div>
        </div>
      </div>
    </div>
  </ModuleTitle>
</template>

<script setup>
import { ref, onMounted, onUnmounted } from 'vue'
import * as echarts from 'echarts'
import NumberAnimation from '@/components/CustomNumberAnimation.vue'
import ModuleTitle from './ModuleTitle.vue'

import { useAutoRefresh } from '@/hooks/useAutoRefresh'

useAutoRefresh(fetchData)

const visitorChart = ref(null)
const orderChart = ref(null)
const duration = ref(1500)
// 今日入馆人次
const visitorNum = ref(35548)
// 今日线上购票订单
const orderNum = ref(29352)

const visitorData = Array(30)
  .fill(0)
  .map((_, i) => {
    const base = 200
    const fluctuation = Math.floor(Math.random() * 100) - 50
    return base + fluctuation
  })
const orderData = Array(30)
  .fill(0)
  .map((_, i) => {
    const base = 200
    const fluctuation = Math.floor(Math.random() * 100) - 50
    return base + fluctuation
  })

let visitorInstance = null
let orderInstance = null

const resizeCharts = () => {
  if (visitorInstance) {
    visitorInstance.resize()
  }
  if (orderInstance) {
    orderInstance.resize()
  }
}


// 组件自己的数据获取方法
function fetchData() {
  console.log('执行组件数据刷新')
  // 这里调用API获取数据
}

onMounted(() => {
  // 初始化访客图表
  visitorInstance = echarts.init(visitorChart.value)
  visitorInstance.setOption({
    series: [
      {
        type: 'bar',
        data: visitorData,
        barWidth: 6, // 设置固定宽度
        itemStyle: {
          color: '#FFB822',
          borderRadius: 3
        }
      }
    ],
    grid: {
      top: 0,
      left: 0,
      right: 0,
      bottom: 0
    },
    xAxis: {
      show: false,
      type: 'category',
      data: Array.from({ length: 30 }, (_, i) => i)
    },
    yAxis: { show: false }
  })

  // 初始化订单图表
  orderInstance = echarts.init(orderChart.value)
  orderInstance.setOption({
    series: [
      {
        type: 'bar',
        data: orderData,
        barWidth: 6, // 修正为数字类型
        itemStyle: {
          color: '#80EC98',
          borderRadius: 3
        }
      }
    ],
    grid: {
      top: 0,
      left: 0,
      right: 0,
      bottom: 0
    },
    xAxis: { show: false, type: 'category', data: Array.from({ length: 30 }, (_, i) => i) },
    yAxis: { show: false }
  })

  // 监听窗口大小变化
  window.addEventListener('resize', resizeCharts)
})

onUnmounted(() => {
  // 移除窗口大小变化监听
  window.removeEventListener('resize', resizeCharts)
  if (visitorInstance) {
    visitorInstance.dispose()
  }
  if (orderInstance) {
    orderInstance.dispose()
  }
})
</script>